import React, {Component} from 'react';
import './index.less'
import logo from '../../assets/images/logo.png';
import {Form, Icon, Input, Button, Modal, message} from 'antd';
import {reqCodes, reqForgetPassword} from "../../api";

/*
* 登录的路由组件*/
class Registered extends Component {
    state = {
        loading: false,
        yztime: 59,
        firstPassword: '',
    };


    handleSubmit_all = (event) => {
        //阻止事件的默认行为
        event.preventDefault()
        //对所有表单字段进行验证
        this.props.form.validateFields(async (err, values) => {
            //验证成功
            if (!err) {
                //1、搜集数据
                const {username,code,password}=values
                const result=await reqForgetPassword(username,code,password)
                this.countDown()
            } else {
                message.error('提交信息有误！')
            }
        });
    }

    handleSubmit_phone = async (event) => {
        //阻止事件的默认行为
        event.preventDefault()
        //验证成功
        if (this.state.isPhone === true) {
            this.setState({loading: true});
            if (this.state.yztime > 0) {
                this.count();
            }
            const username = this.props.form.getFieldValue("username")
            const result = await reqCodes(username)
        } else {
            console.log("错误")
        }
    }

    /*
  * 倒计时60秒*/
    count = () => {
        let {yztime} = this.state;
        let siv = setInterval(() => {
            this.setState({yztime: (yztime--)}, () => {
                if (yztime <= -1) {
                    clearInterval(siv);　　//倒计时( setInterval() 函数会每秒执行一次函数)，用 clearInterval() 来停止执行:
                    this.setState({loading: false, yztime: 59})
                }
            });
        }, 1000);
    }

    /*
     * 对手机号进行校验*/
    validateMobilePhone = (rule, value, callback) => {
        if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(value))) {
            callback('手机号格式不正确')
        } else {
            this.setState({
                isPhone: true
            })
            callback()
        }

    }
    /*
* 对密码进行自定义验证*/
    validateFirstPassword = (rule, value, callback) => {
        if (!value) {
            callback('请输入密码！')
        }
        this.setState({
            firstPassword: value
        })
        callback()//验证通过
    }

    validateLastPassword = (rule, value, callback) => {
        if (value === this.state.firstPassword) {
            callback()
        }
        callback('两次密码不一致')
    }

    countDown() {
        let secondsToGo = 3;
        const modal = Modal.success({
            title: '修改密码成功',
            content: `${secondsToGo} 秒后进入登录页面.`,
            centered:true
        });
        const timer = setInterval(() => {
            secondsToGo -= 1;
            modal.update({
                content: `${secondsToGo} 秒后进入登录页面.`,
            });
        }, 1000);
        setTimeout(() => {
            clearInterval(timer);
            modal.destroy();
            this.props.history.push('/login')
        }, secondsToGo * 1000);
    }

    render() {
        //得到具有强大功能的form对象
        const {getFieldDecorator} = this.props.form
        return (
            <div className="registered">
                <header className="registered-header">
                    <img src={logo} alt="公司logo"/>
                </header>
                <section className="registered-content">
                    <h2>找回密码</h2>
                    <Form onSubmit={this.handleSubmit_phone}>
                        <Form.Item>
                            {
                                getFieldDecorator('username', {
                                    //声明式验证：直接使用别人定义好的验证规则进行验证
                                    //配置对象：属性名是特定的一些名称
                                    rules: [
                                        {required: true, message: '请输入手机号!'},
                                        {whitespace: true, message: '不能为空!'},
                                        {validator: this.validateMobilePhone},
                                    ],
                                })(<Input
                                        prefix={<Icon type="phone" style={{color: 'rgba(0,0,0,.25)'}}/>}
                                        placeholder="手机号"
                                    />
                                )
                            }
                        </Form.Item>
                        <div className="short-message">
                            <Form.Item className="message">
                                {
                                    getFieldDecorator('code', {
                                        rules: [
                                            {required: true, message: '短信验证码必须输入!'},
                                            {whitespace: true, message: '不能为空!'},
                                        ],
                                    })(<Input
                                            prefix={<Icon type="bell" style={{color: 'rgba(0,0,0,.25)'}}/>}
                                            type="input"
                                            placeholder="短信验证码"
                                        />
                                    )
                                }
                            </Form.Item>
                            <Button type="primary" className="button" htmlType="submit"
                                    loading={this.state.loading}>{this.state.loading ? this.state.yztime + '秒' : '发送验证'}</Button>
                        </div>
                    </Form>
                    <Form onSubmit={this.handleSubmit_all} className="registered-form">
                        <Form.Item>
                            {
                                getFieldDecorator('password', {
                                    rules: [
                                        {required: true, message: '请输入密码!'},
                                        {whitespace: true, message: '不能为空!'},
                                        {validator: this.validateFirstPassword},
                                    ],
                                })(<Input
                                        prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>}
                                        type="password"
                                        placeholder="填写新密码"
                                    />
                                )
                            }
                        </Form.Item>
                        <Form.Item>
                            {
                                getFieldDecorator('psd', {
                                    rules: [
                                        {required: true, message: '请确认密码!'},
                                        {whitespace: true, message: '不能为空!'},
                                        {validator: this.validateLastPassword},
                                    ],
                                })(<Input
                                        prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>}
                                        type="password"
                                        placeholder="再次确认密码"
                                    />
                                )
                            }
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="registered-form-button">
                                提交
                            </Button>
                        </Form.Item>
                    </Form>
                </section>
            </div>
        )
    }
}

const WrapLogin = Form.create()(Registered)
export default WrapLogin
